<template>
  <div class="dashboard-container" >
    <h1 style="text-align: center;margin-bottom: 40px;font-size: 35px;color: #486180">日志</h1>
    <el-input
      v-model="systemLogId"
      placeholder="日志ID"
      name="systemLogId"
      type="text"
      clearable
      style="margin-left:40px ;width: 180px"
    />
    <el-input
      v-model="userId"
      placeholder="用户ID"
      name="userId"
      type="text"
      clearable
      style="margin-left:40px ;width: 180px"
    />
    <el-select v-model="roleName" clearable placeholder="房间状态" style="margin-left: 40px;width: 200px">
      <el-option
        v-for="item in roleNames"
        :key="item.roleName"
        :label="item.roleName"
        :value="item.roleName">
      </el-option>
    </el-select>
    <el-button type="primary" plain style="width:80px;margin-bottom:30px;margin-left:40px ;" @click="selectSystemLog">查询</el-button>
    <el-button  style="width:80px;margin-bottom:30px;margin-left:40px ;" @click="checkSystemLog">重置</el-button>


    <el-table :data="systemLogList.slice((currentPage-1)*pagesize,currentPage*pagesize)" height="530px" border style="width: 100%;margin-top: 20px">
      <el-table-column align="center" fixed prop="systemLogId" label="日志ID"/>
      <el-table-column align="center" fixed prop="userId" label="用户ID"/>
      <el-table-column align="center" fixed prop="roleName" label="用户角色"/>
      <el-table-column align="center" fixed prop="createTime" label="操作时间"/>
      <el-table-column align="center" fixed prop="useTableName" label="操作表名"/>
      <el-table-column align="center" fixed prop="useTableDataIdBefore" label="操作前数据"/>
      <el-table-column align="center" fixed prop="useTableDataIdAfter" label="操作后数据"/>
      <el-table-column align="center" fixed prop="useType" label="操作类型"/>

    </el-table>

    <div style="margin-top:20px; text-align: center">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10,15,20]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="systemLogList.length">
      </el-pagination>
    </div>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { deleteRoomType, insertRoomType, selectAllRoomType, updateRoomType } from '@/api/roomType'
import { selectAllRoom } from '@/api/room'
import { selectAllSystemLog } from '@/api/systemLog'
import { selectAllStay } from '@/api/stay'

export default {
  name: 'user',
  computed: {
    ...mapGetters([
      'userId',
      'userName',
      'roleName'
    ])
  },
  data(){
    return{
      systemLogId:'',
      userId:'',
      roleName:'',
      systemLogList:[],
      roleNames:[],

      currentPage: 1,
      currentIndex: '',
      pagesize: 10,
    }
  },
  mounted() {
    this.selectSystemLog()
    this.fetchRoleName()
  },
  methods:{
    handleSizeChange(val) {
      this.pagesize = val;
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage= val
    },

    fetchRoleName(){
      selectAllSystemLog().then(response => {
        this.roleNames = Object.values(
          response.data.reduce((selectRoleName, item) => {
            selectRoleName[item.roleName] = item; // 保留最后一个出现的重复项
            return selectRoleName;
          }, {})
        );
      });
    },
    selectSystemLog(){
      this.currentPage = 1
      selectAllSystemLog({
        systemLogId:this.systemLogId,
        userId:this.userId,
        roleName:this.roleName
      }).then(
        response => {
          console.log(response.data)
          this.systemLogList = response.data
        }
      )
    },
    checkSystemLog(){
      this.systemLogId = ''
      this.userId = ''
      this.roleName = ''
      this.selectSystemLog()
    },

  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
